@import '@/styles/common/px2rem.scss';

.wode {
    flex: 1;
    background: #f2f2f2;
    .headbox {
        background: linear-gradient(-204deg, #fd465f 0, #fc5e9f 100%);

        .lx-head {
            display: flex;
            width: 100%;
            height: px2rem(38);
            color: white;

            i {
                font-size: px2rem(28);
                display: inline-block;
                text-align: center;
                flex: 1;
                height: px2rem(38);
                line-height: px2rem(38);
            }

            span {
                flex: 8;
                text-align: center;
                font-size: px2rem(14);
                height: px2rem(38);
                line-height: px2rem(38);
            }
        }

        .user-unlogin {
            height: px2rem(138);
            width: 100%;
            box-sizing: border-box;
            padding-top: px2rem(20);

            .noportrait {
                background-image: url("../../../images/wodeimg/noportrait.png");
                background-size: px2rem(60);
                width: px2rem(60);
                height: px2rem(60);
                margin: auto;
            }
            ul{
                display: flex;
                width:px2rem(220);
                margin: auto;
                justify-content: center;
                padding: px2rem(10);
                align-items: center;
                .line{
                  flex: 0.1;
                  color:white;
                  font-weight: 100;
                }
                .tabs{
                    flex: 10;
                    text-align: center;
                    a{
                        color:white;
                    }
                }
            }
        }
        .user-login{
              height: px2rem(120);
              width: 100%;
              box-sizing: border-box;
              padding-top: px2rem(20);
               .noportrait-login {
                   background-image: url("../../../images/wodeimg/denglu.png");
                   background-size: px2rem(60);
                   border-radius: px2rem(30);
                   width: px2rem(60);
                   height: px2rem(60);
                   position: absolute;
                   left:px2rem(45);

               }
               .huiyuan{
                   line-height: px2rem(20);
                   margin-left:px2rem(120);
                   .grade{
                       background: rgba(255, 255, 255, .2);
                       border-radius: px2rem(16);
                       width: 30%;
                       letter-spacing: px2rem(0.65);
                       line-height: px2rem(16);
                       padding: px2rem(3) px2rem(5);
                       font-size: px2rem(12);
                       color: #fff;
                   }
               }
                ul {
                    display: flex;
                    width: 70%;
                    justify-content:flex-end;
                    text-align: center;
                    align-items: center;
                    background: white;
                    padding-left:px2rem(100);
                    li{
                        flex: 1;
                        height: px2rem(60);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        p{
                            font-size:px2rem(25);
                        }
                        .sz{
                            font-size:px2rem(14);
                        }
                    }
                }
        }
    }
    .dingdannav {
        width: 100%;
        background: white;
        margin-top: px2rem(10);
        .Dingdanup {
            display: flex;
            margin: auto;
            border-bottom: 1px solid #eaeaea;
            height:px2rem(34);
            line-height:px2rem(34);
            .left {
                flex: 1;
                font-size: px2rem(14);
                padding-left: px2rem(5);
                text-align: left;
                i.iconfont{
                    font-size: px2rem(18);
                }
            }

            .right {
                flex: 1;
                font-size: px2rem(14);
                padding-right: px2rem(5);
                color: #999;
                text-align: right;
            }
        }
        ul{
            display: flex;
           li{
               flex: 1;
               height:px2rem(60);
               padding:px2rem(10) 0;
               display: flex;
               flex-direction: column;
               justify-content: center;
               .sz{
                   font-size: px2rem(12);
               }
               p{
                   text-align: center;
                   font-size: px2rem(24);
                   margin-top: px2rem(6);
               }
           }
        }
    }
    .money {
        width: 100%;
        background: white;
        margin-top: px2rem(10);

        .moneyup {
            display: flex;
            margin: auto;
            border-bottom: 1px solid #eaeaea;
            height: px2rem(34);
            line-height: px2rem(34);

            .left {
                flex: 1;
                font-size: px2rem(14);
                padding-left: px2rem(5);
                text-align: left;
                 i.iconfont {
                     font-size: px2rem(18);
                 }
            }

            .right {
                flex: 1;
                font-size: px2rem(14);
                padding-right: px2rem(5);
                color: #999;
                text-align: right;
            }
        }

        ul {
            display: flex;
            li {
                flex: 1;
                height: px2rem(31);
                padding: px2rem(10) 0;
                .sz {
                    font-size: px2rem(12);
                }
                p {
                    text-align: center;
                    line-height: px2rem(31);
                    height: px2rem(31);
                }
            }
        }
    }
    .booklist {
        width: 100%;
        background: white;
        margin-top: px2rem(10);
         .sale,
         .advice,
         .address,
         .logout,
         .tel {
             display: flex;
             margin: auto;
             border-bottom: 1px solid #eaeaea;
             height: px2rem(34);
             line-height: px2rem(34);

             .left {
                 flex: 1;
                 font-size: px2rem(14);
                 padding-left: px2rem(5);
                 text-align: left;
                 i.iconfont {
                     font-size: px2rem(18);
                 }
             }

             .right {
                 flex: 1;
                 font-size: px2rem(14);
                 padding-right: px2rem(5);
                 color: #999;
                 text-align: right;
             }
         }
     }
     .hint {
         color: #999;
         font-size: px2rem(12);
         margin: px2rem(15);
         line-height: px2rem(15);
         padding-bottom: px2rem(50);
     }
}
.isdisplay{
    display: none;
}
